<template>
  <div class="mydoctor">
    <scroll class="mydoctorScroll">
      <div class="wrapper">
        <ul>
          <li class="item" v-for="item in doctors">
            <router-link to="" class="item-a">
              <div class="left">
                <img src="../../../../static/img/person.png"/>
              </div>
              <div class="right">
                <p class="name"><span>{{item.name}} {{item.position}}</span></p>
                <p class="description ellipsis">{{item.hospitl}} {{item.department}}</p>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </scroll>
  </div>
</template>

<script>
  import {mapMutations, mapGetters} from 'vuex'
  import Scroll from "../../../components/scroll/scroll";
  import {getDoctor} from "../../../api/home";
  import {ERR_OK} from "../../../api/config";

  export default {
    components: {Scroll},
    name: "mydoctor",
    data () {
      return {
        doctors: []
      }
    },
    mounted () {
      this._getDoctor()
      this.setTitle('我的医生')
    },
    methods: {
      _getDoctor () {
        getDoctor().then((res) => {
          let response = res.data
          if (response.code === ERR_OK) {
            this.doctors = response.result
          }
        }).catch((err) => {
          console.log('获取关注的医生失败')
        })
      },
      ...mapMutations({
        setTitle: 'SET_TITLE'
      })
    },
    watch: {
      '$route': '_getDoctor'
    },
    computed: {
      ...mapGetters[
        'title'
        ]
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../common/sass/mixin";
  .mydoctor{
    position: absolute;
    top: 90px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: $bc;
    .mydoctorScroll{
      .wrapper{
        margin-top: 20px;
        background-color: #ffffff;
        ul{
          padding-left: 28px;
          .item{
            padding: 15px 0;
            border-bottom: 1px solid $borderCor;
            .item-a{
              display: flex;
              align-items: center;
              .left{
                height: 75px;
                width: 75px;
                margin-right: 20px;
                img{
                  height: 100%;
                  width: 100%;
                }
              }
              .right{
                text-align: left;
                @include font-dpr(28px);
                .name{
                  color: #333333;
                }
                .description{
                  color: #909090;
                }
              }
            }
            &:last-child{
              border: none;
            }
          }
        }
      }
    }
  }
</style>
